<template>
  <div class="chartBox">
    <!-- 头部部分 -->
    <van-nav-bar title="市场数据">
      <template #left>
        <i class="iconfont iconbtn_nav_back" @click="$router.push('/find')"></i>
      </template>
    </van-nav-bar>
    <!-- 两个下拉组件 -->
    <van-dropdown-menu>
      <!-- 第一个下拉组件 -->
      <van-dropdown-item :title="CityOne" ref="CityRefs">
        <!-- 城市搜索框 -->
        <van-search v-model="CitySearch" placeholder="请输入搜索关键词" />
        <!-- 城市索引列表-->
        <van-index-bar>
          <!-- 使用插槽 -->
          <template v-for="(value, key, index) in AllDate">
            <!-- 索引标题 -->
            <van-index-anchor :index="key" :key="index" class="titleThink" />
            <!-- 城市索引内容 -->
            <van-cell
              v-for="(cityitem, cityindex) in value"
              :title="cityitem[0]"
              @click="CityClick(cityitem, value)"
              :key="cityindex"
            />
          </template>
        </van-index-bar>
      </van-dropdown-item>
      <!-- 第二个下拉组件 -->
      <van-dropdown-item :title="jobCoutent" v-model="jobCoutent" ref="jobRefs">
        <!-- 搜索内容 -->
        <van-search v-model="jobSearch" placeholder="请输入搜索关键词" />
        <!-- 职业索引内容 -->
        <template v-for="(item, index) in changeJob">
          <van-cell :title="item" @click="pitchJob(item)" :key="index" />
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 图表区域 -->
    <div class="bigBox">
      <!-- 饼图-->
      <div class="pieBox">
        <h2>工资收入</h2>
        <div class="tabelBox">
          <span>区间</span>
          <span>占比</span>
        </div>
        <canvas id="pies"> </canvas>
        <div class="buttomDlow">
          <span>近1年 {{ percentSample }} 份样本 / 可信度：高</span>
        </div>
      </div>
      <!-- 面积图1-->
      <div class="extwo">
        <h2>工作经验</h2>
        <canvas id="extwoID"></canvas>
      </div>
      <!-- 面积图2 -->
      <div class="artWram">
        <h2>历年平均工资变化趋势</h2>
        <canvas id="artId"></canvas>
      </div>
      <!-- 面积图3-->
      <div class="zeemp">
        <h2>就业形势</h2>
        <span class="axis">相关职位比例</span>
        <canvas id="stauisId"></canvas>
      </div>
      <!-- 底部说明部分 -->
      <div class="theEnd">
        <div class="buttonEnd">
          <i class="van-icon van-icon-warning-o"></i> 说明
        </div>
        <div class="buttonEndr">
          曲线越向上代表市场需求量越大，就业情况越好。反之，代表该类职位需求量较少。该数据由各地招聘网站统计而来，可能因抓取系统稳定性等因素而致使数据偏离客观实情，仅供参考。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2/lib/index-all'
import $ from 'jquery'
import { chartIndexes, chartStatistics } from '@/api/api.js'
export default {
  data () {
    return {
      cityData: '',
      CitySearch: '',
      CityOne: '',
      jobCoutent: '',
      jobSearch: '',
      AllDate: '',
      percentSalary: '',
      percentSample: null,
      experienceSalary: '',
      yearSalary: '',
      employmentNum: '',
      jobDate: []
    }
  },
  computed: {
    changeJob () {
      const nowVa = this.jobDate.filter(vew => {
        return vew.includes(this.jobSearch)
      })
      return nowVa
    }
  },
  // 侦听器  当前的职业变化时,发送获取统计数据的请求,并重新渲染表图
  watch: {
    jobCoutent: function () {
      this.watchGetApi()
    }
  },
  // 生命周期 mounted
  mounted () {
    this.getDatas()
  },
  methods: {
    // -2.侦听器方法
    async watchGetApi () {
      // 1.发送请求,获取统计数据
      const res = await chartStatistics({
        city: this.CityOne,
        position: this.jobCoutent
      })
      this.watchMtodad(res)
    },
    // -1. 生命周期 mounted 调用接口,获取原始数据
    async getDatas () {
      const res = await chartIndexes()
      this.AllDate = res.data
      // 城市默认值
      this.CityOne = this.AllDate['热门'][0][0]
      // 热门职业信息
      this.jobDate = this.AllDate['热门'][0][1]
      // 职业默认值
      this.jobCoutent = this.jobDate[0]
    },
    // 0.watch中得到表图数据并重新渲染表图方法
    watchMtodad (res) {
      // 饼图===================>
      // 1.饼图数据保存
      this.percentSalary = res.data.percentSalary
      // 2.调用饼图
      this.pieOne()
      // 3.保存底部条状图
      this.percentSample = res.data.percentSample
      // 面积图1====================>
      // 1.保存面积1数据
      this.experienceSalary = res.data.experienceSalary
      // 2.调用图像2
      this.extowrt()
      // 面积图2====================>
      // 1. 获取面积图数据,对数据进行改造
      this.yearSalary = res.data.yearSalary.map(value => {
        return {
          num: value.sample + '',
          date: parseInt(value.year) + '',
          value: parseInt(value.salary)
        }
      })
      // 2.调用面积图2
      this.artCrt()
      // 面积图3=====================>
      // 1. 得到面积图3的数据
      this.employmentNum = res.data.employmentNum
      // 2.调用面积图
      this.zeepThree()
    },
    // 1.城市列表点击事件
    async CityClick (value, valueted) {
      // 重新赋值选中的标题
      this.CityOne = value[0]
      // 赋值新的职业数据
      this.jobDate = value[1]
      // 默认选中第一个
      this.jobCoutent = value[1][0]
      // 切换弹出状态
      this.$refs.CityRefs.toggle()
      this.valueted = valueted
    },
    // 2.职位列表点击事件
    async pitchJob (value) {
      // 保存到当前的职位
      this.jobCoutent = value
      // 切换弹出状态
      this.$refs.jobRefs.toggle()
      this.jobSearch = ''
    },
    // 三.图表部分
    // 3.========================================饼图statr=======================================================
    pieOne () {
      const colorObj = {}
      const legendItems = []
      this.percentSalary.forEach((value, index) => {
        const item = {
          name: value.assetType,
          value: `${value.percent}%`,
          marker: {
            symbol: 'square',
            fill: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#d57731'][
              index
            ],
            radius: 4
          }
        }
        colorObj[value.assetType] = [
          '#1890FF',
          '#13C2C2',
          '#2FC25B',
          '#FACC14',
          '#d57731'
        ][index]
        legendItems.push(item)
      })
      const chart = new F2.Chart({
        id: 'pies',
        pixelRatio: window.devicePixelRatio
      })
      chart.source(this.percentSalary, {
        percent: {
          formatter: function formatter (val) {
            return val + '%'
          }
        }
      })
      chart.coord('polar', {
        transposed: true,
        radius: 10,
        innerRadius: 0.5
      })
      chart.legend({
        position: 'right',
        custom: true,
        showTitle: true,
        items: legendItems,
        nameStyle: {
          fill: '#808080'
        },
        valueStyle: {
          fill: '#333',
          textAlign: 'left'
        }
      })
      chart.axis(false)
      chart
        .interval()
        .position('const*percent')
        .color('assetType', function (val) {
          return colorObj[val]
        })
        .adjust('stack')
        .style({
          lineWidth: 1,
          stroke: '#fff'
        })
      chart.render()
    },
    // 3.========================================饼图end==========================================================

    // 4.========================================面积图1开始=======================================================
    extowrt () {
      const canvasOffsetTop = $('#extwoID').position().top
      const canvasOffsetLeft = $('#extwoID').position().left
      const chart = new F2.Chart({
        id: 'extwoID',
        pixelRatio: window.devicePixelRatio
      })
      chart.source(this.experienceSalary)
      chart.tooltip({
        custom: true,
        onChange: function onChange (ev) {
          const tooltipEl = $('.extwo')
          const currentData = ev.items[0]
          tooltipEl.css({
            opacity: 1,
            left:
              canvasOffsetLeft +
              currentData.x -
              tooltipEl.outerWidth() / 2 +
              'px',
            top:
              canvasOffsetTop +
              currentData.y -
              tooltipEl.outerHeight() -
              15 +
              'px'
          })
        }
      })
      chart.axis('info', {
        tickLine: {
          length: 4,
          stroke: '#fff',
          lineWidth: 1
        }
      })
      chart
        .line()
        .position('info*value')
        .color('#a1bdff')
      chart
        .point()
        .position('info*value')
        .adjust('stack')
        .style('medalType', { fill: '#fff', lineWidth: 1 })
        .color('#a1bdff')
      chart
        .area()
        .position('info*value')
        .color('#a1bdff')
      chart.render()
    },
    // ========================================面积图1结束=======================================================

    // 5.=========================================面积图2开始======================================================
    artCrt () {
      const data = this.yearSalary
      const canvasOffsetTop = $('#artId').position().top
      const canvasOffsetLeft = $('#artId').position().left
      const chart = new F2.Chart({
        id: 'artId',
        pixelRatio: window.devicePixelRatio
      })
      chart.source(data, {
        date: {
          tickCount: 5,
          min: 0
        }
      })
      chart.tooltip({
        custom: true,
        onChange: function onChange (ev) {
          const tooltipEl = $('.extwo')
          const currentData = ev.items[0]
          tooltipEl.css({
            opacity: 1,
            left:
              canvasOffsetLeft +
              currentData.x -
              tooltipEl.outerWidth() / 2 +
              'px',
            top:
              canvasOffsetTop +
              currentData.y -
              tooltipEl.outerHeight() -
              15 +
              'px'
          })
        }
      })
      chart.axis('date', {
        tickLine: {
          length: 2,
          stroke: '#e8e8e8',
          lineWidth: 1
        }
      })
      chart
        .line()
        .position('date*value')
        .color('#a1bdff')
      chart
        .point()
        .position('date*value')
        .adjust('stack')
        .style('medalType', { fill: '#fff', lineWidth: 1 })
        .color('#a1bdff')
      chart
        .area()
        .position('date*value')
        .color('#a1bdff')
      chart.render()
    },
    // ==========================================面积图2结束==================================================

    // 6.==========================================面积图3开始====================================================
    zeepThree () {
      const data = this.employmentNum
      const chart = new F2.Chart({
        id: 'stauisId',
        pixelRatio: window.devicePixelRatio
      })
      chart.source(data, {})
      chart.axis('value', false)
      chart.axis('date', {
        label: {
          rotate: -Math.PI / 2,
          textAlign: 'end',
          textBaseline: 'middle'
        }
      })
      chart
        .line()
        .position('date*value')
        .color('#a1bdff')
        .shape('smooth')
      chart
        .point()
        .position('date*value')
        .adjust('stack')
        .style('medalType', { fill: '#fff', lineWidth: 1 })
        .color('#a1bdff')
      chart
        .area()
        .position('date*value')
        .color('#a1bdff')
      chart.render()
    }
    // ==========================================面积图3结束====================================================
  }
}
</script>
<style lang="less" scoped>
.chartBox {
  .titleThink {
    background-color: #f5f8ff;
  }
  .iconfont {
    font-size: 45px;
  }
  /deep/ .van-nav-bar__left,
  .van-nav-bar__right {
    padding: 0;
  }
  .bigBox {
    padding: 15px;
    h2 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
      margin-bottom: 12px;
    }
    canvas {
      width: 100%;
      height: 190px;
    }
    .textPie {
      text-align: center;
      width: 150px;
      height: 150px;
      p {
        color: #222222;
      }
      #title {
        font-size: 11px;
        margin: 0;
        margin-bottom: 5px;
      }
      #money {
        font-size: 11px;
        margin: 0;
      }
    }
    .pieBox {
      position: relative;
      margin-bottom: 40px;
      .tabelBox {
        width: 90px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #b4b4bd;
        padding-bottom: 7px;
        position: absolute;
        right: 20px;
        top: 40px;
      }
      .buttomDlow {
        font-size: 12px;
        color: #b4b4bd;
        text-align: center;
      }
    }
  }
  .zeemp {
    position: relative;
    .axis {
      position: absolute;
      font-size: 10px;
      transform: rotate(-90deg);
      left: -30px;
      top: 100px;
      color: #545671;
    }
  }
  .van-search {
    background: #ffffff;
  }
  .theEnd {
    color: #545671;
    font-size: 10px;
    .buttonEnd {
      font-size: 12px;
      margin-bottom: 8px;
    }
    .buttonEndr {
      line-height: 15px;
    }
  }
}
</style>
